<template>
  <div class="container">
    <!-- <div class="title">
      <span class="txt">设备</span>
    </div> -->

    <div class="div_box">
      <div class="item">
        <el-image :src="img" class="image"></el-image>
      </div>
      <div class="item">
        <div>设备总数</div>
        <div class="count" style="cursor: pointer;" @click="toDevice"><span>
            <countTo :startVal='0' :endVal='sum' :duration='3000'></countTo>
          </span></div>
      </div>
      <div class="item">
        <div>在线</div>
        <div class="count count2"><span>
            <countTo :startVal='0' :endVal='count1' :duration='3000'></countTo>
          </span></div>
      </div>
      <div class="item">
        <div>离线</div>
        <div class="count "><span>
            <countTo :startVal='0' :endVal='count2' :duration='3000'></countTo>
          </span></div>
      </div>
      <div class="item">
        <div>告警</div>
        <div class="count "><span>
            <countTo :startVal='0' :endVal='count3' :duration='3000'></countTo>
          </span></div>
      </div>
      <div class="item">
        <div>今日新增</div>
        <div class="count "><span>
            <countTo :startVal='0' :endVal='todayalarmcount' :duration='3000'></countTo>
          </span></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  reqDeviceCount,
  reqTodayAlarmCount
} from "@api/apiDatav.js";
import { mapState } from "vuex";
import countTo from 'vue-count-to';

export default {
  components: {
    countTo
  },
  data() {
    return {
      count1: 0,
      count2: 0,
      count3: 0,
      sum: 0,
      img: require("@assets/images/datav/shebei.png"),
      todayalarmcount: 0,
    };
  },
  computed: {
    ...mapState(["user","spacesManage"]),
  },
  watch: {},
  methods: {
    toDevice() {
      // this.$router.replace("/device/list")
      this.$router.replace({ name: 'deviceList', params: { orgId: '1', orgName: '' } });
    },
    // 新增设备
    async getTodayAlarmCount() {
      let res = await reqTodayAlarmCount({
        tenantId: this.user.tenantId,
        orgId: this.spacesManage.organizationInfo.orgId,
        type: 1,
        roleName: this.user.roleName,
        userId: this.user.userId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.todayalarmcount = res.data.row.todayCount || 0;
    },
    async getDeviceCount() {
      let res = await reqDeviceCount({
        tenantId: this.user.tenantId,
        orgId: this.spacesManage.organizationInfo.orgId,
        roleName: this.user.roleName,
        userId: this.user.userId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if (res.data.row.length == 0) {
        this.count1 = 0;
        this.count2 = 0;
        this.sum = 0;
        return;
      }
      res.data.row.forEach(result => {
        if (result.online == 1) {
          this.count1 = result.count ? result.count : 0
        } else if (result.online == 0) {
          this.count2 = result.count ? result.count : 0
        } else if (result.online == 2) {
          this.count3 = result.count ? result.count : 0//告警
        }
        this.sum = this.count1 + this.count2//总数
      })
    },
  },
  created() {
  },
  mounted() { },
};
</script>

<style lang='less' scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~'@{vh}vh';
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.top (@px, @attr: top) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.container {
  // padding: 15px 20px;
  box-sizing: border-box;
  // .height(180);
  height: 100%;
  .fontSize(16);

  // display: flex;
  // flex-direction: column;
  .title {
    .marginTop(20);
    .height(28);
    .lineHeight(28);
    .marginLeft(20);
    display: flex;
    align-items: center;

    .line {
      .marginRight(6);
      .width(4);
      .height(14);
      display: block;
      background: #8777FF;
      border-radius: 1px;
    }

    .txt {
      .height(28);
      .fontSize(16);
      .lineHeight(28);
      font-weight: 600;
      // color: #8777FF;
      color: #fff;
    }
  }

  .div_box {
    // .height(85);
    height: 100%;
    .fontSize(13);
    color: #ccc;
    display: flex;
    padding: 7% 2% 7% 2%;
    box-sizing: border-box;

    .item {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      align-items: center;

      >div:first-of-type {
        color: #8EA4E9;
      }

      .count {
        // color: #8777FF;
        .marginTop(20);

        span {
          .fontSize(30);
          color: #00FEC4;
          font-weight: 600;
        }
      }

      // .count1 {
      //   color: #27a046;
      // }

      // .count2 {
      //   color: #FC5D49;
      // }

      // .count3 {
      //   color: #1F7AFF;
      // }
    }
  }
}
</style>